<template>
  <div
    class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow"
  >
    <div class="p-5">
      <div class="flex justify-between items-start mb-4">
        <div class="flex items-center space-x-3">
          <img
            :src="post.author.avatar"
            alt="作者头像"
            class="w-10 h-10 rounded-full object-cover"
          />
          <div>
            <h3 class="font-medium text-gray-900">{{ post.author.name }}</h3>
            <p class="text-xs text-gray-500">
              {{ post.author.role }} · {{ post.author.time }}
            </p>
          </div>
        </div>
        <div class="flex space-x-2">
          <button
            class="text-gray-400 hover:text-gray-600 transition-colors"
            title="取消收藏"
            @click="$emit('uncollect', post.id)"
          >
            <i class="fa fa-star text-yellow-400"></i>
          </button>
          <button
            class="text-gray-400 hover:text-gray-600 transition-colors"
            title="分享"
          >
            <i class="fa fa-share-alt"></i>
          </button>
        </div>
      </div>

      <a href="#" class="block">
        <h2
          class="text-xl font-bold text-gray-900 mb-2 hover:text-primary transition-colors"
        >
          {{ post.title }}
        </h2>
        <p class="text-gray-600 mb-4 line-clamp-2">{{ post.content }}</p>

        <!-- 图片预览 -->
        <div
          v-if="post.images && post.images.length > 0"
          class="grid grid-cols-3 gap-2 mb-4"
        >
          <img
            v-for="(image, index) in post.images"
            :key="index"
            :src="image"
            alt="帖子图片"
            class="w-full h-24 object-cover rounded-lg"
          />
        </div>

        <div class="flex items-center space-x-3 text-sm text-gray-500 mb-4">
          <span class="flex items-center space-x-1">
            <i class="fa fa-eye"></i>
            <span>{{ post.stats.views }}</span>
          </span>
          <span class="flex items-center space-x-1">
            <i class="fa fa-comment-o"></i>
            <span>{{ post.stats.comments }}</span>
          </span>
          <span class="flex items-center space-x-1">
            <i class="fa fa-heart-o"></i>
            <span>{{ post.stats.likes }}</span>
          </span>
          <span class="flex items-center space-x-1">
            <i class="fa fa-bookmark-o"></i>
            <span>{{ post.stats.bookmarks }}</span>
          </span>
        </div>

        <div class="flex flex-wrap gap-2">
          <span
            v-for="(tag, index) in post.tags"
            :key="index"
            class="tag"
            :class="{
              'bg-primary/10 text-primary': tag.type === 'primary',
              'bg-secondary/10 text-secondary': tag.type === 'secondary',
              'bg-accent/10 text-accent': tag.type === 'accent',
              'bg-gray-100 text-gray-600': tag.type === 'normal',
            }"
          >
            {{ tag.name }}
          </span>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"

// 类型定义
interface PostProps {
  post: {
    id: number
    author: {
      name: string
      avatar: string
      role: string
      time: string
    }
    title: string
    content: string
    stats: {
      views: string
      comments: string
      likes: string
      bookmarks: string
    }
    tags: Array<{
      name: string
      type: string
    }>
    images?: string[]
  }
}

// Props
const props = defineProps<PostProps>()

// Emits
const emit = defineEmits<{
  uncollect: [id: number]
}>()
</script>

<style scoped>
/* 组件特定样式 */
.tag {
  display: inline-flex;
  align-items: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
</style>
